<template>
    <div class="bg-bg-black-4 rounded-[0.5rem] py-[0.5rem]">
        <div class="p-2  pb-4 text-[0.875rem] text-text-white-0 font-[600]" v-if="groupTitle">{{groupTitle}}</div>
        <template v-for="(menu, index) in list" :key="index">
            <AppMenuItem :menu-item="menu" @click="toggle(menu, index)" :active="openIndex === index" v-if="menu.children?.length"/>
            <BaseSheet
                v-model="showSheet"
                :title="menu.sheetTitle"
                :items="menu.children"
                v-if="menu.type === 'sheet'"
            >
                <template  #default="{ item }: { item?: MenuItem }">
                    <li
                    class="mx-[0.875rem] h-[2.5rem] px-[0.5rem] rounded-[0.375rem] flex items-center justify-between"
                    :class="[item?.value === current && 'bg-bg-black-4']"
                    @click="menu?.change?.(item?.value); showSheet = false"
                    >
                    <span class="font-medium text-text-white-1 text-[1rem] ml-[.5rem]">{{ item?.title }}</span>
                    <div class="size-[1rem] border-[.1875rem] border-brand rounded-[50%]"
                        v-if="item?.value === current"></div>
                    </li>
                </template>
            </BaseSheet>
            <template v-else>
                <transition name="accordion" v-if="menu.children?.length">
                    <div v-show="openIndex === index" class="bg-bg-black-3">
                        <template v-for="(child, i) in menu.children" :key="i">
                            <AppMenuItem :menu-item="child" @click="pushMenu(child)"/>
                        </template>
                    </div>
                </transition>
                <AppMenuItem v-else :menuItem="menu" @click="pushMenu(menu)"></AppMenuItem>
            </template>
        </template>
    </div>
</template>
<script setup lang="ts">
const { userLanguage } = storeToRefs(useLanguageStore())
const router = useRouter()
const { locale, t } = useI18n()
const emit = defineEmits(['cb'])
interface Props {
  list: Menu
  groupTitle?: string
  current?: string
}
defineOptions({
  name: 'PayPassword',
})
const props = defineProps<Props>()
const openIndex = ref<number | null>(null);
const showSheet = ref(false)
const toggle = (item: MenuItem, index: number) => {
    if(item.type === 'sheet'){
        showSheet.value = true
        return
    }
    openIndex.value = openIndex.value === index ? null : index;
};
function pushMenu(item: any) {
    if(item.icon === 'menu-sign-out'){
        emit('cb')
        return
    }
    if (item.path) {
        router.push(`/${locale.value}${item.path}`)
    }
}

</script><style scoped>
.accordion-enter-active, .accordion-leave-active {
  transition: all 0.3s ease;
}
.accordion-enter-from, .accordion-leave-to {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}
.accordion-enter-to, .accordion-leave-from {
  max-height: 500px;
  opacity: 1;
}
</style>